<html>
<head lang="en">
    <meta charset="utf-8">
    <title>ECharts</title>
    <script src="echarts.js"></script>
</head>
<body>
    <div id="world" style="height: 500px;width: 950px;"></div>

    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>
    
     <script>
            var myChart = echarts.init(document.getElementById('world'));
            let nameMap = {
                Afghanistan: '阿富汗',
                Singapore: '新加坡',
                Angola: '安哥拉',
                Albania: '阿尔巴尼亚',
                'United Arab Emirates': '阿联酋',
                Argentina: '阿根廷',
                Armenia: '亚美尼亚',
                'French Southern and Antarctic Lands':
                    '法属南半球和南极领地',
                Australia: '澳大利亚',
                Austria: '奥地利',
                Azerbaijan: '阿塞拜疆',
                Burundi: '布隆迪',
                Belgium: '比利时',
                Benin: '贝宁',
                'Burkina Faso': '布基纳法索',
                Bangladesh: '孟加拉国',
                Bulgaria: '保加利亚',
                'The Bahamas': '巴哈马',
                'Bosnia and Herzegovina': '波斯尼亚和黑塞哥维那',
                Belarus: '白俄罗斯',
                Belize: '伯利兹',
                Bermuda: '百慕大',
                Bolivia: '玻利维亚',
                Brazil: '巴西',
                Brunei: '文莱',
                Bhutan: '不丹',
                Botswana: '博茨瓦纳',
                'Central African Republic': '中非共和国',
                Canada: '加拿大',
                Switzerland: '瑞士',
                Chile: '智利',
                China: '中国',
                'Ivory Coast': '象牙海岸',
                Cameroon: '喀麦隆',
                'Democratic Republic of the Congo': '刚果民主共和国',
                'Republic of the Congo': '刚果共和国',
                Colombia: '哥伦比亚',
                'Costa Rica': '哥斯达黎加',
                Cuba: '古巴',
                'Northern Cyprus': '北塞浦路斯',
                Cyprus: '塞浦路斯',
                'Czech Republic': '捷克共和国',
                Germany: '德国',
                Djibouti: '吉布提',
                Denmark: '丹麦',
                'Dominican Republic': '多明尼加共和国',
                Algeria: '阿尔及利亚',
                Ecuador: '厄瓜多尔',
                Egypt: '埃及',
                Eritrea: '厄立特里亚',
                Spain: '西班牙',
                Estonia: '爱沙尼亚',
                Ethiopia: '埃塞俄比亚',
                Finland: '芬兰',
                Fiji: '斐',
                'Falkland Islands': '福克兰群岛',
                France: '法国',
                Gabon: '加蓬',
                'United Kingdom': '英国',
                Georgia: '格鲁吉亚',
                Ghana: '加纳',
                Guinea: '几内亚',
                Gambia: '冈比亚',
                'Guinea Bissau': '几内亚比绍',
                Greece: '希腊',
                Greenland: '格陵兰',
                Guatemala: '危地马拉',
                'French Guiana': '法属圭亚那',
                Guyana: '圭亚那',
                Honduras: '洪都拉斯',
                Croatia: '克罗地亚',
                Haiti: '海地',
                Hungary: '匈牙利',
                Indonesia: '印度尼西亚',
                India: '印度',
                Ireland: '爱尔兰',
                Iran: '伊朗',
                Iraq: '伊拉克',
                Iceland: '冰岛',
                Israel: '以色列',
                Italy: '意大利',
                Jamaica: '牙买加',
                Jordan: '约旦',
                Japan: '日本',
                Kazakhstan: '哈萨克斯坦',
                Kenya: '肯尼亚',
                Kyrgyzstan: '吉尔吉斯斯坦',
                Cambodia: '柬埔寨',
                Kosovo: '科索沃',
                Kuwait: '科威特',
                Laos: '老挝',
                Lebanon: '黎巴嫩',
                Liberia: '利比里亚',
                Libya: '利比亚',
                'Sri Lanka': '斯里兰卡',
                Lesotho: '莱索托',
                Lithuania: '立陶宛',
                Luxembourg: '卢森堡',
                Latvia: '拉脱维亚',
                Morocco: '摩洛哥',
                Moldova: '摩尔多瓦',
                Madagascar: '马达加斯加',
                Mexico: '墨西哥',
                Macedonia: '马其顿',
                Mali: '马里',
                Myanmar: '缅甸',
                Montenegro: '黑山',
                Mongolia: '蒙古',
                Mozambique: '莫桑比克',
                Mauritania: '毛里塔尼亚',
                Malawi: '马拉维',
                Malaysia: '马来西亚',
                Namibia: '纳米比亚',
                'New Caledonia': '新喀里多尼亚',
                Niger: '尼日尔',
                Nigeria: '尼日利亚',
                Nicaragua: '尼加拉瓜',
                Netherlands: '荷兰',
                Norway: '挪威',
                Nepal: '尼泊尔',
                'New Zealand': '新西兰',
                Oman: '阿曼',
                Pakistan: '巴基斯坦',
                Panama: '巴拿马',
                Peru: '秘鲁',
                Philippines: '菲律宾',
                'Papua New Guinea': '巴布亚新几内亚',
                Poland: '波兰',
                'Puerto Rico': '波多黎各',
                'North Korea': '北朝鲜',
                Portugal: '葡萄牙',
                Paraguay: '巴拉圭',
                Qatar: '卡塔尔',
                Romania: '罗马尼亚',
                Russia: '俄罗斯',
                Rwanda: '卢旺达',
                'Western Sahara': '西撒哈拉',
                'Saudi Arabia': '沙特阿拉伯',
                Sudan: '苏丹',
                'South Sudan': '南苏丹',
                Senegal: '塞内加尔',
                'Solomon Islands': '所罗门群岛',
                'Sierra Leone': '塞拉利昂',
                'El Salvador': '萨尔瓦多',
                Somaliland: '索马里兰',
                Somalia: '索马里',
                'Republic of Serbia': '塞尔维亚',
                Suriname: '苏里南',
                Slovakia: '斯洛伐克',
                Slovenia: '斯洛文尼亚',
                Sweden: '瑞典',
                Swaziland: '斯威士兰',
                Syria: '叙利亚',
                Chad: '乍得',
                Togo: '多哥',
                Thailand: '泰国',
                Tajikistan: '塔吉克斯坦',
                Turkmenistan: '土库曼斯坦',
                'East Timor': '东帝汶',
                'Trinidad and Tobago': '特里尼达和多巴哥',
                Tunisia: '突尼斯',
                Turkey: '土耳其',
                'United Republic of Tanzania': '坦桑尼亚',
                Uganda: '乌干达',
                Ukraine: '乌克兰',
                Uruguay: '乌拉圭',
                'United States': '美国',
                Uzbekistan: '乌兹别克斯坦',
                Venezuela: '委内瑞拉',
                Vietnam: '越南',
                Vanuatu: '瓦努阿图',
                'West Bank': '西岸',
                Yemen: '也门',
                'South Africa': '南非',
                Zambia: '赞比亚',
                Korea: '韩国',
                Tanzania: '坦桑尼亚',
                Zimbabwe: '津巴布韦',
                Congo: '刚果',
                'Central African Rep.': '中非',
                Serbia: '塞尔维亚',
                'Bosnia and Herz.': '波黑',
                'Czech Rep.': '捷克',
                'W. Sahara': '西撒哈拉',
                'Lao PDR': '老挝',
                'Dem.Rep.Korea': '朝鲜',
                'Falkland Is.': '福克兰群岛',
                'Timor-Leste': '东帝汶',
                'Solomon Is.': '所罗门群岛',
                Palestine: '巴勒斯坦',
                'N. Cyprus': '北塞浦路斯',
                Aland: '奥兰群岛',
                'Fr. S. Antarctic Lands': '法属南半球和南极陆地',
                Mauritius: '毛里求斯',
                Comoros: '科摩罗',
                'Eq. Guinea': '赤道几内亚',
                'Guinea-Bissau': '几内亚比绍',
                'Dominican Rep.': '多米尼加',
                'Saint Lucia': '圣卢西亚',
                Dominica: '多米尼克',
                'Antigua and Barb.': '安提瓜和巴布达',
                'U.S. Virgin Is.': '美国原始岛屿',
                Montserrat: '蒙塞拉特',
                Grenada: '格林纳达',
                Barbados: '巴巴多斯',
                Samoa: '萨摩亚',
                Bahamas: '巴哈马',
                'Cayman Is.': '开曼群岛',
                'Faeroe Is.': '法罗群岛',
                'IsIe of Man': '马恩岛',
                Malta: '马耳他共和国',
                Jersey: '泽西',
                'Cape Verde': '佛得角共和国',
                'Turks and Caicos Is.': '特克斯和凯科斯群岛',
                'St. Vin. and Gren.': '圣文森特和格林纳丁斯'
            }
            option = {
                // 图表主标题
                title: {
                    text: '世界地图', // 主标题文本，支持使用 \n 换行
                    //top: 20, // 定位 值: 'top', 'middle', 'bottom' 也可以是具体的值或者百分比
                    left: 'center', // 值: 'left', 'center', 'right' 同上
                    textStyle: { // 文本样式
                        fontSize: 18,
                        fontWeight: 600,
                        color: 'black'
                    }
                },
                tooltip: {
                    trigger: 'item',
                    formatter: function (params) {
                        console.log(params)
                        if (params.name) {
                            return params.name + ' : ' + (isNaN(params.value) ? 0 : parseInt(params.value));
                        }
                    }
                },
                // 视觉映射组件
                visualMap: {
    
                    type: 'continuous', // continuous 类型为连续型  piecewise 类型为分段型
                    show: true, // 是否显示 visualMap-continuous 组件 如果设置为 false，不会显示，但是数据映射的功能还存在
                    // 指定 visualMapContinuous 组件的允许的最小/大值。'min'/'max' 必须用户指定。
                    // [visualMap.min, visualMax.max] 形成了视觉映射的『定义域』
    
                    // 文本样式
                    textStyle: {
                        fontSize: 14,
                        color: '#fff'
                    },
                    realtime: false, // 拖拽时，是否实时更新
                    calculable: true, // 是否显示拖拽用的手柄
                    // 定义 在选中范围中 的视觉元素
                    inRange: {
                        color: ['#fff000', '#ffac53', '#74e2ca', '#85daef', '#9feaa5', '#5475f5'] // 图元的颜色
                    }
                },
                series: [
                    {
                        name: 'World Population (2010)',
                        type: 'map',
                        mapType: 'world',
                        roam: true,
                        itemStyle: {
                            areaColor: '#7B68EE', // 地图区域的颜色 如果设置了visualMap，areaColor属性将不起作用
                            borderWidth: 0.5, // 描边线宽 为 0 时无描边
                            borderColor: '#000', // 图形的描边颜色 支持的颜色格式同 color，不支持回调函数
                            borderType: 'solid', // 描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'
                            emphasis: {label: {show: true}}
                        },
                        label: {
                            show: false // 是否显示对应地名
                        },
                        data: [
                            {name: '萨摩亚', value: 21},
                            {name: '乌克兰', value: 49.124},
                            {name: '越南', value: 150.143},
                            {name: '新西兰', value: 41.537},
                            {name: '墨西哥', value: 2074.224},
                            {name: '美国', value:120.496},
                            {name: '巴拿马', value: 68.065},
                            {name: '澳大利亚', value: 104.488},
                            {name: '中国', value: 150.123},
    
                        ],
                        nameMap: nameMap
                    }
                ]
            };
            myChart.setOption(option);
    
        </script>
    
</body>
</html>
